<template>
	<view class="page-content-box">
		<view class="info-box">
			
			<view class="info-item">
				<view class="name-box">我的用户名</view>
				<view class="right-box form-item">
					<input class="uni-input input-content" disabled="true" placeholder-class="input-place" maxlength="30" type="text" name="input" :value="form.custom_nick_name"/>
				</view>
			</view>
			<view class="info-item">
				<view class="name-box">手机号</view>
				<view class="right-box form-item">
					<input class="uni-input input-content" disabled="true" placeholder-class="input-place" maxlength="30" type="text" name="input" :value="form.mobile"/>
				</view>
			</view>
			
			<view class="info-item">
				<view class="name-box">性别</view>
				<view class="right-box">
					{{userInfo.sex}}
				</view>
			</view>
			
			<view v-if="userInfo.listAllOrg" class="info-item">
				<view class="name-box">所属组织</view>
				<view v-for="(item,index) in userInfo.listAllOrg" :key="index" class="right-box">
					{{item.orgFullName}}
				</view>
				
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			
			
			return {
				
				company_name:'',
				
				userInfo:{},
				form:{
					custom_nick_name:'',
					mobile:'',
					profession:'',
				}
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#70dbff'
			})
		},
		onShow() {
			var _this = this;
			if(uni.getStorageSync("userInfo")){
				this.userInfo = uni.getStorageSync("userInfo");
				this.form.custom_nick_name = this.userInfo.userName;
				
				if(this.userInfo.mobilePhone){
					this.form.mobile = this.userInfo.mobilePhone;
				}
				
				if(this.userInfo.powerKeys){
					this.form.profession = this.userInfo.powerKeys;
				}
			}
		
		},
		computed: {
			
			
		},
		methods: {
			
			
			
		},
		onUnload(){
			var _this = this;
			// if(uni.getStorageSync("key")&&uni.getStorageSync("secret")) {
			// 	var params = this.form;
			// 	var userInfo = JSON.parse(uni.getStorageSync("userInfo"));
				
			// }
		}
	}
</script>

<style>
	.page-content-box{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.info-box{
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}
	.info-box .info-item{
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
	.info-box .img-item{
		height: 140rpx;
	}
	.info-box .name-box{
		flex: 1;
		font-size: 28rpx;
		color: #999999;
		line-height: 100rpx;
	}
	.info-box .img-item .name-box{
		line-height: 140rpx;
	}
	.info-box .right-box{
		flex: 3;
		text-align: right;
		font-size: 28rpx;
		color: #161616;
		line-height: 100rpx;
	}
	.info-box .right-box .user-number{
		font-size: 28rpx;
		color: #161616;
		line-height: 100rpx;
	}
	.info-box .number-box{
		padding-right: 80rpx;
		box-sizing: border-box;
		position: relative;
	}
	.info-box .right-box .copy-now{
		width:60rpx;
		height:30rpx;
		display: inline-block;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(193,193,193,1);
		border-radius:5rpx;
		padding: 0;
		line-height: 30rpx;
		font-size:20rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(22,22,22,1);
		position: absolute;
		right: 0;
		top: 35rpx;
	}
	.info-box .img-box{
		padding-top: 25rpx;
	}
	.info-box .info-item .input-content{
		padding: 0;
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
	}
	.info-box .right-box picker{
		height: 100%;
		line-height: 100%;
		padding-right: 34rpx;
		box-sizing: border-box;
		position: relative;
	}
	.info-box .right-box picker .select-date{
		font-size: 28rpx;
		line-height: 100rpx;
	}
	.info-box .right-box picker .place-date{
		color:rgba(153,153,153,1); 
	}
	.info-box .right-box picker .go-right{
		position: absolute;
		right: 0;
		top: 38rpx;
		width: 12rpx;
		height: 24rpx;
	}
	.info-box .sao-box{
		font-size: 28rpx;
		color:rgba(153,153,153,1); 
	}
</style>
